<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    
    <!-- 计算属性
    侦听器 -->
    <div id="counter">
    
        <input type="number" v-model="num1">
        <input type="number" v-model="num2">
        {{rtl}}
    </div>



</body>
<script>
    const Counter = {
    data() {
        return {
            myHB: '',
            obj: {
                name: 'name'
            },
            counter: "aa",
            message: "",
            studentslist: [{name: "张三", sno: 1, index: 0}, 
                {name: "李四", sno: 2, index: 1},
                {name: "王五", sno: 3, index: 2},
                {name: "赵六", sno: 4, index: 3}
            ],
            num1: 0,
            num2: 0,
        }
    },
    computed: {
        rtl() {
            return this.num1 + this.num2
        }
    },
    watch: {
        num2(newValue, oldValue) {
            //监听某个值变化之前变化之后的值
            
            console.log(newValue)
            console.log(oldValue)
        }
    },
    methods: {
        click() {
            alert("a")
        }
    },
}

let App = Vue.createApp(Counter);
// 注册一个全局自定义指令 `v-focus`
App.directive('focus', {
    // 当被绑定的元素插入到 DOM 中时……
    mounted(el, delivered) {
      // 聚焦元素
      console.log(delivered)
      el.value = delivered.value
      console.log(el.value)
      el.focus()
    }
})
App.mount('#counter')
</script>
</html>